<script>
export default {
  props: ['tableList', 'fetchTableData'],
  watch: {
    tableList(n) {
      if (n) {
        this.parentTable = n
      }
    }
  },
  data() {
    return {
      param: {
        content: {}
      },
      parentTable: {
        item: null
      },
      detailOrAdd: {
        template: {},
        data: {}
      },
      instituteList: {
        data: []
      },
      buildingList: {
        data: []
      },
      energyList: {
        data: []
      },
    }
  },
  mounted() {
    this.fetchBaseData()
    this.parentTable = this.tableList
    if (this.parentTable.item) {
      this.detailOrAdd.data = this.parentTable.item
    }else {
      this.detailOrAdd.data = this.detailOrAdd.template
    }
  },
  methods: {
    formCancel: function () {
      this.fetchTableData()
    },
    fetchBaseData: function () {
      this.$axios({url:'/ems/client/base/institute/list',data: this.param}).then((content) => {
        const list = content.list;
        list.forEach(function (item) {
          if (item.nameInfo) {
            item.nameInfo = JSON.parse(item.nameInfo)
          }
        })
        this.instituteList.data = list
      });
      this.$axios({url:'/ems/client/base/building/list',data: this.param}).then((content) => {
        const list = content.list;
        list.forEach(function (item) {
          if (item.nameInfo) {
            item.nameInfo = JSON.parse(item.nameInfo)
          }
        })
        this.buildingList.data = list
      });
      this.$axios({url:'/ems/client/base/energy/list',data: {content: {}}}).then((content) => {
        const list = content.list;
        list.forEach(function (item) {
          if (item.nameInfo) {
            item.nameInfo = JSON.parse(item.nameInfo)
          }
        })
        this.energyList.data = list
      });
    },
    formSubmit: function () {
      this.$axios({url:'/ems/client/base/energy/fee/update',data: {content: this.tableList.item}}).then((content) => {
        if (content) {
          this.$message("保存成功")
          this.formCancel()
        }
      });
    }
  }
}
</script>

<template>
  <el-form ref="form" :model="detailOrAdd.data" label-width="150px">
    <el-row  style="margin-top: 20px;">
      <el-col :span="4">&nbsp;</el-col>
      <el-col :span="8">
        <el-form-item label="ID">
          <el-input v-model="detailOrAdd.data.id" style="width: 250px;" disabled></el-input>
        </el-form-item>
        <el-form-item prop="energyId" label="费用能源类型" :rules="[{ required: true, message: '不能为空'}]">
          <el-select v-model="detailOrAdd.data.energyId" placeholder="费用能源类型">
            <el-option v-for="item in energyList.data" :key="item.id" :label="item.nameInfo['zh-CN']" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="name" label="名称" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.name" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item prop="buildingId" label="适用建筑">
          <el-select v-model="detailOrAdd.data.buildingId" placeholder="请选择适用建筑">
            <el-option v-for="item in buildingList.data" :key="item.id" :label="item.nameInfo.shortName['zh-CN']" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="instituteId" label="适用院所">
          <el-select v-model="detailOrAdd.data.instituteId" placeholder="请选择适用院所">
            <el-option v-for="item in instituteList.data" :key="item.id" :label="item.nameInfo.shortName['zh-CN']" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="areaCode" label="适用行政区域编码">
          <el-input v-model="detailOrAdd.data.areaCode" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item prop="numRange" label="月度累计值范围">
          <el-input v-model="detailOrAdd.data.numRange" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item prop="timeRange" label="时间范围">
          <el-input v-model="detailOrAdd.data.timeRange" style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="兑换人民币比例（一单位对应人民币分）" label-width="150px" :rules="[{ required: true, message: '不能为空'}]">
          <el-input v-model="detailOrAdd.data.value" style="width: 250px;"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="4">&nbsp;</el-col>
    </el-row>
    <el-row>
      <el-col :span="4">&nbsp;</el-col>
      <el-col :span="16">
        <label>
          规则说明:<br/>
          1、优先匹配【时间范围】和【月度累计值范围】，无值意为不设限<br/>
          2、再匹配【建筑】&gt;【院所】&gt;【行政区域编码】&gt;是否为【行政区域编码】下属地，无值意为不设限<br/>
          3、【时间范围】和【月度累计值范围】请在示例基础上修改<br/>
          月度累计值范围:<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;[:表示包含,{不包含<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;]:表示包含,}不包含<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;{1,100}解释为：1&lt;【累计值】&lt;100<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;[1,100]解释为：1&lt;=【累计值】&lt;=100<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;[,100]解释为：【累计值】&lt;=100<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;[1,]解释为：1&lt;=【累计值】<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;<label style="color: red;">示例：{1,100}</label>
          时间范围:
          &nbsp;&nbsp;&nbsp;&nbsp;yyyy:年取值，如2025<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;MM:月取值，如12<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;HH:小时取值，如23<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;[{"MMdd":{"from":"0101","end":"1231"},"HH":{"from":"01","end":"24"}}]解释为：从1月1日到12月31日且每天的1点到24点<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;<label style="color: red;">示例：[{"MMdd":{"from":"0101","end":"1231"},"HH":{"from":"01","end":"24"}}]</label>
        </label>
      </el-col>
      <el-col :span="4">&nbsp;</el-col>
    </el-row>
    <el-row>
      <el-button type="primary" @click="formSubmit">提交</el-button>
      <el-button @click="formCancel">取消</el-button>
    </el-row>
  </el-form>
</template>

<style>

</style>
